:root {
     /* Background Colors */
     --ebgallery1-bg-page: #f4f6f8;
     --ebgallery1-bg-card: #ffffff;

     --ebgallery1-primary: #DB1A1A;
     --ebgallery1-secondary: #1C1C1C;
     --ebgallery1-helper: #F3F1EE;
     --ebgallery1-overlay: #f3f1ee6b;
     --ebgallery1-container-width: 1440px;

     /* Text Colors */
     --ebgallery1-text-number: #333333;
     --ebgallery1-text-description: #888888;

     /* Box Shadow (Even if it shares a gray tone, we make a unique variable as requested) */
     --ebgallery1-shadow-card: rgba(0, 0, 0, 0.1);

     /* 4: Font Sizes using clamp() */
     --ebgallery1-fs-number: clamp(1.1rem, 2.5vw, 1.3rem);
     --ebgallery1-fs-text: clamp(0.9rem, 2vw, 1.1rem);
 }

 /* 
          ========================================
          6: Commented List for Margins & Padding 
          ========================================
          - .ebgallery1-wrapper 
            > padding: clamp(15px, 3vw, 30px);
            > Reason: To give the entire gallery breathing room from the screen edges responsively.
            
          - .ebgallery1-card-footer 
            > padding: clamp(12px, 2vw, 20px);
            > Reason: To create internal space between the text content and the edges of the white footer.
            
          * Note: NO margins are used anywhere. All spacing between elements is strictly handled by Flexbox 'gap' (Rule 1).
        */

 /* 
          ========================================
          1 & 7: Mobile First Design & Flexbox Parent
          ========================================
        */

 .ebgallery1-hero {
     max-height: fit-content;

     display: flex;

     align-items: center;

     justify-content: center;

     background: var(--ebgallery1-helper);

     background-repeat: no-repeat;
     padding-block: 1.2rem;
     width: 100%;
 }

 .ebgallery1-container {

     max-width: var(--ebgallery1-container-width);

     width: 100%;

     display: flex;

     flex-direction: column;

     justify-content: center;

     align-items: start;
     gap: 1.2rem;
 }

 .ebgallery1-content {
     width: 100%;
     text-align: center;

     padding-inline: 0.8rem;
 }

 .ebgallery1-title {
     color: var(--ebgallery1-primary);

     font-size:

         clamp(1.8rem,

             4.5vw,

             3rem);
 }

 .ebgallery1-text-block {

     display: flex;
     align-items: start;
     justify-content: center;
     flex-direction: column;

     gap: 0.8rem;
 }


 .ebgallery1-wrapper {
     display: flex;
     flex-direction: column;
     /* Mobile first: stacked columns */
     gap: 20px;
     /* Perfect gap without margins */
     padding: clamp(15px, 3vw, 30px);
     max-width: var(--ebgallery1-container-width);

     width: 100%;
 }

 .ebgallery1-column {
     display: flex;
     flex-direction: column;
     gap: 20px;
     /* Gap between cards in the same column */
     flex: 1;
     /* Allows columns to share width equally on desktop */
 }

 .ebgallery1-card {
     display: flex;
     flex-direction: column;
     background-color: var(--ebgallery1-bg-card);
     box-shadow: 0 4px 8px var(--ebgallery1-shadow-card);
     border-radius: 10px;
     /* No padding or margin here, utilizing flex gap from parent */
 }

 .ebgallery1-img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
     border-radius: 10px 10px 0px 0px;

 }
 .ebgallery1-img.small-img {
     width: 100%;
     aspect-ratio: 1 / .5;
     display: block;
     object-fit: cover;
     border-radius: 10px 10px 0px 0px;

 }

 .ebgallery1-card-footer {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 15px;
     /* Gap between the number and the text */
     padding: clamp(12px, 2vw, 20px);
 }

 .ebgallery1-number {
     color: var(--ebgallery1-text-number);
     font-size: var(--ebgallery1-fs-number);
     font-weight: bold;
 }

 .ebgallery1-description {
     color: var(--ebgallery1-text-description);
     font-size: var(--ebgallery1-fs-text);
 }

 .ebgallery1-btn {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: .4rem;

     padding: .4rem;

     font-size: 1.125rem;
     color: var(--ebgallery1-helper);
     border-radius: 0px;

     background: linear-gradient(-45deg,
             var(--ebgallery1-primary),
             var(--ebgallery1-secondary),
             var(--ebgallery1-primary));
     background-size: 600%;

     animation: ebgallery1-anime 16s linear infinite;
     z-index: 2;
     direction: ltr;
     /* margin-inline: 5px; */
 }

 .ebgallery1-btn .fa-whatsapp {
     font-size: 1.5rem;
 }


 /* blur effect */
 .ebgallery1-btn-blur {
     position: absolute;

     padding: .4rem 1.2rem;
     border-radius: 50px;

     background: linear-gradient(-45deg,
             var(--ebgallery1-primary),
             var(--ebgallery1-secondary),
             var(--ebgallery1-helper),
             var(--ebgallery1-primary));
     background-size: 600%;

     animation: ebgallery1-anime 16s linear infinite;
     filter: blur(30px);

     opacity: 0.8;
     z-index: 1;

 }

 /* animation */
 @keyframes ebgallery1-anime {

     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }

 }

 /* 
          ========================================
          Desktop Design (Media Query)
          ========================================
        */
 @media (min-width: 768px) {
     .ebgallery1-wrapper {
         flex-direction: row;
         /* Desktop: side-by-side columns to create masonry effect */
         align-items: flex-start;
     }
 }